---
title: EdgeRenderer 边渲染器
icon: Network
relatedFile: app/src/core/render/canvas2d/entityRenderer/edge/EdgeRenderer.tsx
---

这个服务用于管理和渲染不同类型的边（连接线），例如直线边和三次 Catmull-Rom 样条曲线边。它根据用户设置动态切换内部使用的具体渲染器，并处理边的各种状态（如选中、移动、连接到折叠区域）以及箭头的绘制。

## 内部机制

这个服务维护一个 `currentRenderer` 实例，它是一个 `EdgeRendererClass` 的具体实现。
- 基于 `Settings` 中 `lineStyle` 的变化，服务会切换 `currentRenderer` 到对应的具体渲染器，例如 `StraightEdgeRenderer`、`SymmetryCurveEdgeRenderer` 或 `VerticalPolyEdgeRenderer`。
- 这种设计允许服务根据用户偏好或特定场景，灵活地使用不同的渲染算法来绘制边。

## API

### 渲染控制

#### `checkRendererBySettings(lineStyle: Settings["lineStyle"]): void`

根据 `lineStyle` 设置检查并更新当前使用的渲染器。

#### `updateRenderer(style: Settings["lineStyle"]): Promise<void>`

异步更新当前使用的渲染器，确保它与传入的 `style` 参数匹配。

#### `renderLineEdge(edge: LineEdge): void`

渲染一条直线边。
- 处理源节点或目标节点被折叠隐藏的情况。
- 根据边的状态（自循环、移动中、正常）调用相应渲染器的渲染方法。
- 如果边被选中，还会渲染碰撞框、起始点和终止点的高亮效果，以及一条连接起始点的虚线。

#### `renderCrEdge(edge: CubicCatmullRomSplineEdge): void`

渲染一条三次 Catmull-Rom 样条曲线边。
- 绘制曲线本身。
- 渲染曲线的控制点。
- 如果边有文本，渲染文本内容。
- 渲染边的箭头。
- 如果边被选中，渲染碰撞框高亮。

#### `renderVirtualEdge(startNode: ConnectableEntity, mouseLocation: Vector): void`

渲染一条从起始节点到鼠标当前位置的虚拟边，用于表示潜在的连接。

#### `renderVirtualConfirmedEdge(startNode: ConnectableEntity, endNode: ConnectableEntity): void`

渲染一条在两个已确认节点之间的虚拟边。

### 边视图管理

#### `getMinNonCollapseParentSection(innerEntity: ConnectableEntity): Section`

当一个内部可连接实体被外部连接但其父级 Section 折叠时，此方法用于获取其最小的非折叠父级 Section。

#### `getEdgeView(edge: LineEdge): LineEdge`

根据边的源节点和目标节点的折叠状态，返回一个用于渲染的 `LineEdge` 视图。
- 如果源节点或目标节点被折叠，可能会创建一个新的 `LineEdge`，其端点连接到最近的非折叠父级 Section。

#### `getEdgeSvg(edge: LineEdge): React.ReactNode`

返回一个 `React.ReactNode`，表示直线边的 SVG 渲染结果。
- 处理自循环边和移动中的边。

### 效果获取

#### `getCuttingEffects(edge: Edge)`

获取指定边的切割效果。

#### `getConnectedEffects(startNode: ConnectableEntity, toNode: ConnectableEntity)`

获取两个节点之间的连接效果。

### 箭头渲染

#### `renderArrowHead(endPoint: Vector, direction: Vector, size: number, color: Color): void`

在 Canvas 上绘制一个箭头。
- 基于终点、方向、大小和颜色计算箭头的多边形顶点。
- 将世界坐标转换为视图坐标后进行渲染。

#### `generateArrowHeadSvg(endPoint: Vector, direction: Vector, size: number, edgeColor: Color): React.ReactNode`

生成一个 `React.ReactNode`，表示箭头的 SVG 多边形。
- 计算箭头的多边形顶点。
- 返回一个 `<polygon>` SVG 元素字符串。
